<template>
  <template v-for="item in  cursorAttr ">
    <div class="panel_ctrl_box" :style="{
      'cursor': `${item[0]}`,
      'width': `${item[1]}px`,
      'height': `${item[2]}px`,
      'left': `${item[3]}px`,
      'top': `${item[4]}px`,
      'border-radius': `${item[5]}px`
    }">
    </div>
  </template>
</template>

<script setup lang="ts">

// 光标 样式;宽;高;左;顶;圆角;
const cursorAttr = ref([
  ['move', 100, 100, 10, 10, '0'],//中
  ['n-resize', 10, 10, 55, 5, '0'],//北
  ['s-resize', 10, 10, 55, 105, '0'],//南
  ['e-resize', 10, 10, 5, 55, '0'],//西
  ['w-resize', 10, 10, 105, 55, '0'],//东
  ['nw-resize', 10, 10, 5, 5, '0'],//
  ['ne-resize', 10, 10, 105, 5, '0'],//
  ['sw-resize', 10, 10, 5, 105, '0'],//
  ['se-resize', 10, 10, 105, 105, '0'],//
  ['pointer', 20, 20, 50, 135, '15'],//
])
</script>

<style lang="scss" scoped>
.panel_ctrl_box {
  position: absolute;
  border: 1px solid rgb(0, 255, 255);
}
</style>
